<template>
  <div class="map-box">
    <div id="light-map" v-loading="maploading"></div>
    <span class="map-address">
      <span class="address-name">当前经纬度</span>
      <span class="address-text">{{ value.join(",") }}</span>
    </span>
    <input
      type="text"
      class="map-search-input"
      autocomplete="off"
      id="input_id"
      placeholder="输入搜索地址"
    />
  </div>
</template>

<script>
export default {
  name: "change-map",
  props: {
    value: {
      type: Array,
    },
    center: {
      type: Array,
    },
  },
  data() {
    return {
      maploading: false,
      zoom: 12,
      AMap: null,
      map: null,
      marker: null,
    };
  },
  watch: {
    center: {
      handler() {
        //   修改地图的位置
        if (this.center.length > 0) {
          if (this.map) {
            this.map.panTo(this.center);
            this.marker.setPosition(this.center);
            this.$emit("input", this.center);
          }
        }
      },
    },
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const { zoom, center } = this;
      //   加载地图
      this.maploading = true;
      if (!this.AMap) {
        this.AMap = AMap;
      }
      let options = {
        showButton: true, //是否显示定位按钮
        buttonPosition: "LB", //定位按钮的位置
        /* LT LB RT RB */
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
        showMarker: false, //是否显示定位点
        showCircle: true, //是否显示定位精度圈
        circleOptions: {
          //定位精度圈的样式
          strokeColor: "#0093FF",
          noSelect: true,
          strokeOpacity: 0.5,
          strokeWeight: 1,
          fillColor: "#02B0FF",
          fillOpacity: 0.25,
        },
      };
      if (this.value.length <= 0) {
        this.value = [116.400953, 39.911835];
      }
      this.map = new AMap.Map("light-map", {
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: zoom,
        center: this.value,
      });
      this.maploading = false;
      this.addMarker();
      this.map.on("click", (ev) => {
        let center = ev.lnglat;
        const { lng, lat } = center;
        this.marker.setPosition([lng, lat]);
        this.$emit("input", [lng, lat]);
      });
      AMap.plugin("AMap.Autocomplete", () => {
        let autoOptions = {
          input: "input_id",
        };
        let autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.on("select", (e) => {
          let center = e.poi.location;
          const { lng, lat } = center;
          const cen = [lng, lat];
          this.map.panTo(cen);
          this.marker.setPosition(cen);
          this.$emit("input", cen);
        });
      });
    },
    addMarker() {
      const { Amap, center } = this;
      this.marker = new AMap.Marker({
        icon:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: center.length > 0 ? center : [116.400953, 39.911835],
        offset: new AMap.Pixel(-13, -34),
      });
      this.marker.setMap(this.map);
    },
  },
};
</script>

<style lang="scss">
.map-box {
  width: 100%;
  height: 500px;
  position: relative;
}
#light-map {
  width: 100%;
  height: 500px;
}
.map-address {
  display: block;
  width: 200px;
  height: 30px;
  background: #fff;
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding-left: 100px;
  border-radius: 6px;
  overflow: hidden;
  .address-name {
    display: block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    background: #e1e1e1;
  }
  .address-text {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 30px;
  }
}
.amap-icon img,
.amap-marker-content img {
  width: 26px;
  height: 34px;
}
.map-search-input {
  width: 300px;
  height: 30px;
  position: absolute;
  top: 20px;
  left: 20px;
}
.amap-sug-result {
  z-index: 9999;
}
</style>
